﻿<!DOCTYPE html>
<html>
<head>
    <title>Comparison of displays</title>
    <link rel="stylesheet" href="css/display.css"/>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/display.js"></script>
    <script type="text/javascript" src="js/data.js"></script>
</head>

<body>
    <div id="main-panel">
        <input id="button-apply" type="button" value="apply" onclick="Display.apply()">
    </div>
    <div class="display-block">
        <div class="display-select">
            <button onclick="Display.fill(this, '', '', '');">Clear</button>
        </div>
        <hr>
        <table class="display-size">
            <tr>
                <td>Diagonal</td>
                <td><input class="display-diagonal" type="text"/></td>
                <td>inch</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>Width</td>
                <td><input class="display-width" type="text"/></td>
                <td>px</td>
                <td>0</td>
                <td>cm</td>
            </tr>
            <tr>
                <td>Height</td>
                <td><input class="display-height" type="text"/></td>
                <td>px</td>
                <td>0</td>
                <td>cm</td>
            </tr>
        </table>
        <hr>
        <div class="display-div" style="text-align: right">
            <div class="display"><img class="wall-e" src="img/wall-e.jpg"></div>
        </div>
    </div>
    <div class="display-block">
        <div class="display-select">
            <button onclick="Display.fill(this, '', '', '');">Clear</button>
        </div>
        <hr>
        <table class="display-size">
            <tr>
                <td>Diagonal</td>
                <td><input class="display-diagonal" type="text"/></td>
                <td>inch</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>Width</td>
                <td><input class="display-width" type="text"/></td>
                <td>px</td>
                <td>0</td>
                <td>cm</td>
            </tr>
            <tr>
                <td>Height</td>
                <td><input class="display-height" type="text"/></td>
                <td>px</td>
                <td>0</td>
                <td>cm</td>
            </tr>
        </table>
        <hr>
        <div class="display-div" style="text-align: right">
            <div class="display"><img class="wall-e" src="img/wall-e.jpg"></div>
        </div>
    </div>
</body>
</html>